<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        style="height: 60px;" active-text-color=" red" router>

        <el-menu-item index="/home" style="margin-left: 30px;">
            <img id="logo" src="../assets/logo.svg" alt="logo" />
            <p style="font-size: 18px;margin-left: 10px;">[ 旧城以西妆造馆 ]</p>
        </el-menu-item>

        <el-menu-item index="/login" :disabled="dis">{{ loginInfo }}<el-icon>
                <User />
            </el-icon></el-menu-item>
        <el-menu-item index="/rouge">妆造风格<el-icon>
                <CameraFilled />
            </el-icon></el-menu-item>

        <el-menu-item index="/user"  v-if="isLogin">个人中心<el-icon>
                <Tools />
            </el-icon></el-menu-item>

        <el-sub-menu index="">
            <template #title>预约</template>
            <el-menu-item index="/make"><el-icon>
                    <Clock />
                </el-icon>预约服务</el-menu-item>
            <el-menu-item index="/record"><el-icon>
                    <Picture />
                </el-icon>选片预约</el-menu-item>
            <span class="el-menu-item" @click="outLogin" v-if="isLogin"><el-icon>
                    <SwitchButton />
                </el-icon>重新登录</span>
        </el-sub-menu>
    </el-menu>

    <!-- 页面内容显示区域 -->
    <div>
        <router-view></router-view>
    </div>

    <div id="bottom">
        <div id="bottom-1">
            <span class="sp1">妆造摄影一站式服务</span>
            <p class="sp2">Makeup photography one-stop service</p>
            <div id="bottom-2">
                <div class="bottom-3" style="margin-left: 500px;">
                    <!-- 图标展示 -->
                    <span class="icon">
                        <el-icon size="20px">
                            <Pointer />
                        </el-icon><br>
                    </span>
                    <p class="yuyue">服务预约</p>
                </div>

                <div class="bottom-3">
                    <!-- 图标展示 -->
                    <span class="icon">
                        <el-icon size="20px">
                            <VideoCamera />
                        </el-icon>
                    </span>
                    <p class="yuyue">筹备策划</p>
                </div>
                <div class="bottom-3">
                    <!-- 图标展示 -->
                    <span class="icon">
                        <el-icon size="20px">
                            <Picture />
                        </el-icon>
                    </span>
                    <p class="yuyue">后期服务</p>
                </div>
                <div class="bottom-3">
                    <span class="icon">
                        <!-- 图标展示 -->
                        <el-icon size="20px">
                            <ChatSquare />
                        </el-icon>
                    </span>
                    <p class="yuyue">服务评价</p>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
//引入路由
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
//创建实例    
const route = useRoute();
//绑定上面声明的属性，动态改变默认选中按钮
const activeIndex = computed(() => route.path);
//图标
import { Clock, CameraFilled, User, Pointer, VideoCamera, Picture, ChatSquare, SwitchButton, MoreFilled, Tools } from "@element-plus/icons-vue";

const loginInfo = ref('登录')
const dis = ref(false)

import { userPiniaInfo } from '@/stores/userPinia';
import router from '@/router';
const info = userPiniaInfo();

const isLogin = ref(false)

const username = () => {
    if (info.userInfo != '') {
        loginInfo.value = info.userInfo.name
        dis.value = true
        isLogin.value = true
    }
}
//上来就调用一会
username()

//监听pinia的存储信息的变化 从而改变登录
watch(() => info.userInfo, () => {
    username();
})


// 点击事件处理函数
const outLogin = (event) => {
    //阻止默认index跳转
    event.stopPropagation();
    //清除pinia中存储的信息
    info.removeuserPinia();
    router.push("/login")
    ElMessage.success('成功退出登录~')

};
</script>


<style scoped>
#logo {
    width: 44px;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}

.btn-left.swiper-button-prev,
.btn-right.swiper-button-next {
    color: rgb(213, 213, 213);
}

.btn-left:hover,
.btn-right:hover {
    color: red;
}


.el-menu-item {
    background-color: transparent !important;
    color: #333 !important;
}

.el-menu-item:hover {
    background-color: transparent !important;
    color: red !important;
}

#bottom {
    width: 100%;
    height: 300px;
    background-color: beige;
    text-align: center;
}

.sp1 {
    color: #333;
    font-size: 20px;
}

.sp2 {
    color: #AAA;
}

#bottom-1 {
    height: 100px;
    position: relative;
    top: 40px;

}

.icon {
    border: 2px solid #AAA;
    padding: 13px 14px;
    border-radius: 10px;
}

#bottom-2 {
    position: relative;
    top: 50px;
    display: flex;
}

.yuyue {
    color: #333;
    font-size: 13px;
    margin-top: 20px;
}

.bottom-3 {
    margin-left: 100px;
}
</style>